<template>
  <div class="content">
    <div id="wrap" :style="{ height: screenHeight + 'px' }">
      <div id="main" :style="{ top: nowTop+50+'px' }">
        <div class="citySeven_nav">
          <li v-for="(singleComponent,index) in homeComponents" :key="singleComponent.key" :class="{'nav_active': curIndex === index+1}" @click="navTo(index)">{{ singleComponent.title }}</li>
        </div>
        <div v-for="(singleComponent,index) in homeComponents" :ref="`page${index+1}`" :key="singleComponent.key" :class="`home-page-component page page${index+1}`">
          <component :is="singleComponent.component" />
        </div>
        <!-- <div ref="page2" class="page page2">
          <graph />
        </div>
        <div ref="page3" class="page page3">
          <Benchmark />
        </div>-->
      </div>
    </div>
    <SafeTip is-bottom :env="env" />
  </div>
</template>
<script>
import graph from './components/graph'
import pageHome from './components/pageHome'
import Benchmark from '@haisum-cloud/ui-components/packages/Benchmark'
import SafeTip from '@haisum-cloud/ui-components/packages/safeTip'
import { mapGetters } from 'vuex'
export default {
  components: {
    graph, pageHome, Benchmark, SafeTip
  },
  data() {
    return {
      env: process.env.VUE_APP_NODE_ENV || process.env.NODE_ENV,
      screenHeight: 0, // 屏幕高度
      index: 1, // 用于判断翻页
      curIndex: 1, // 当前页的index
      nowTop: 0, // 翻屏后top的位置
      permission: {
        homeChart: ['admin', 'project:homeChart']
      },
      componentsMap: { 'pageHome': { title: '海诚·云工场项目启动情况', component: pageHome }, 'graph': { title: '统计图表', component: graph }, 'benchmark': { title: '标杆项目', component: Benchmark }},
      homeComponents: []
    }
  },
  beforeMount() {
    this.initHomeComponents()
  },
  mounted() {
    this.screenHeight = document.documentElement.clientHeight
    /* 初始设置插入页面height*/
    // 构建组件
    this.$nextTick(() => {
      this.screenHeight = document.documentElement.clientHeight
      document.querySelectorAll('.home-page-component').forEach(dom => {
        dom.style.height = this.screenHeight + 'px'
      })
    })
    window.addEventListener('resize', this.reSize)
  },
  computed: {
    ...mapGetters([
      'pageParmas'
    ])
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.reSize)
  },
  methods: {
    initHomeComponents() {
      const defaultOrder = { 'pageHome': 1, 'graph': 2, 'benchmark': 3 }
      const homeWidgetOrders = this.pageParmas['home-widget-orders'] ? JSON.parse(this.pageParmas['home-widget-orders'].value) : defaultOrder
      let targetComponents = []
      Object.entries(this.componentsMap).forEach(([key, value]) => {
        const { title, component } = value
        if (key === 'graph' && !this.checkPer(this.permission.homeChart)) return
        targetComponents.push({
          key,
          title, component,
          sort: homeWidgetOrders[key] || 1
        })
      })
      targetComponents = targetComponents.sort((a, b) => {
        return a.sort - b.sort
      })
      this.homeComponents = targetComponents
      console.log('targetComponents', targetComponents)
    },
    reSize() {
      this.$nextTick(() => {
        this.screenHeight = document.documentElement.clientHeight
        document.querySelectorAll('.home-page-component').forEach(dom => {
          dom.style.height = this.screenHeight + 'px'
        })
        const screenHeight = this.screenHeight * (this.index - 1) * -1
        this.nowTop = screenHeight
      })
    },
    /* 点击切换页面*/
    navTo(a, page) {
      this.index = a + 1
      this.toPage(this.index)
    },
    // 翻页
    toPage(index) {
      const screenHeight = this.screenHeight * (index - 1) * -1
      if (index !== this.curIndex) {
        this.nowTop = screenHeight
        this.curIndex = index
      }
    }
  }
}

</script>
<style scoped lang="scss">
html,body {
  height: 100%;
  width: 100%;
  overflow: auto !important;
}
body,
ul,
li,
a,
p,
div {
  padding: 0px;
  margin: 0px;
}
.content{
  width: 100%;
  height:100%;
  overflow: hidden;
  position: absolute;
}
#wrap {
  width: 100%;
}

#main {
  position: relative;
  transition: top 0.8s;
}
.page {
  width: 100%;
  height: 100%;
  margin: 0;
}
.citySeven_nav {
  width: 100%;
  height: 50px;
  background-color: #fff;
  display: inline-flex;
  font-size: 10px;
  font-weight: lighter;
  position: fixed ;
  top: 84px;
  z-index: 1;
  padding: 16px;
  border-bottom: 2px solid #e7f4f5;
  :hover{
    cursor: pointer;
  }
}
.citySeven_nav li {
  display: inline-block;
  font-size: 16px;
  color: #343333;
  line-height: 22px;
  margin-right: 48px;
}
.nav_active {
  font-weight: bold;
  color: var(--ui-theme-color) !important;
  height: 34px;
  position: relative;
}
.nav_active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0px;
  width: 29px;
  height: 2px;
  background-color: var(--ui-theme-color);
  transform: translateX(-50%);
}

.nav_one {
  margin-right: auto;
}
</style>

